// 柱状图组件

import * as echarts from "echarts";
import { useEffect, useRef } from "react";

const BarChart = ({ title }) => {
  const BarChart = useRef(null);
  useEffect(() => {
    // 保证dom可用，才进行图表渲染
    // 获取图标dom节点
    const chartDom = BarChart.current;
    // 初始化图表 生成图表实例
    const myChart = echarts.init(chartDom);
    // 设置图表配置项
    const option = {
      title: {
        text: title,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["Vue", "React", "Angular"],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "使用量",
          type: "bar",
          barWidth: "60%",
          data: [10, 40, 70],
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表 完成图表渲染
    option && myChart.setOption(option);
  }, []);
  return <div ref={BarChart} style={{ width: "500px", height: "400px" }}></div>;
};

export default BarChart;
